<template>
  <div id="info-window" style="display: none" class="maps-info">
    <a-card :title="title">
      <template #extra>
        <a-button class="maps-close" type="link" @click="handleClose">关闭</a-button>
      </template>
      <div class="maps-info-title">
        {{ selectAddress.name }}
      </div>
      <div class="maps-info-address">
        {{ selectAddress.address }}
      </div>
      <div class="maps-info-footer" v-if="showFooter">
        <a-button class="maps-footer-button" type="primary" @click="handleConfirm">确认</a-button>
        <a-button class="maps-footer-button" @click="handleCancel">取消</a-button>
      </div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
  import { BasicForm, useForm } from "/@/components/Form"
  import { unref, ref } from "vue"

  const emit = defineEmits(["confirm", "cancel"])
  const showFooter = ref(true)
  const tipConfirm = "请确认您的店铺地址"
  const tipConfirmed = "已确认地址"
  const title = ref(tipConfirm)
  const props = defineProps({
    selectAddress: { type: Object, default: {} },
  })

  const handleConfirm = () => {
    console.log("handleConfirm")
    title.value = tipConfirmed
    showFooter.value = false
    emit("confirm", unref(props.selectAddress))
  }

  const reset = () => {
    title.value = tipConfirm
    showFooter.value = true
  }

  const handleCancel = () => {
    console.log("handleConfirm")
    // @ts-ignore
    hidden()
    emit("cancel")
  }

  const handleClose = () => {
    title.value = tipConfirm
    showFooter.value = true
    hidden()
  }
  const hidden = () => {
    // @ts-ignore
    const style = document.getElementById("info-window")?.style
    if (style) {
      style.display = "none"
    }
  }
  const show = () => {
    // @ts-ignore
    document.getElementById("info-window").style.display = "inline"
  }
  defineExpose({ hidden, show, reset })
</script>
<style lang="less" scoped>
  .maps-info {
    position: absolute;
    width: 320px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    border-radius: 2px;
    background: #fff;
    font-family: Microsoft YaHei;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .maps-info-title {
    color: #000;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 10px;
  }

  .maps-info-address {
    color: #b2b2b2;
    font-size: 14px;
    line-height: 20px;
  }

  .maps-info-footer {
    margin-top: 10px;
    line-height: 40px;
    text-align: center;
    border-top: 1px solid #eee;
  }
  .maps-footer-button {
    margin: 10px 10px -10px 10px;
  }

  .maps-close {
    margin-right: -20px;
  }
</style>
